<template>
  <view :class="viewClassNames" v-if="c.state?.isCreated">
    <slot>
      <FormPage :modelData="c.model" :controller="c">
        <template v-slot:[detail.id] v-for="detail in c.model.deformPages" :key="detail.id">
          <FormContainer
            v-for="child in detail.deformDetails"
            :key="child.id"
            :modelData="child"
            :controller="c"
          ></FormContainer>
        </template>
      </FormPage>
    </slot>
  </view>
</template>

<script lang="ts" setup>
import { FormController } from '@ibiz-template/runtime'
import { useNamespace } from '../use'
const props = defineProps({
  controller: {
    type: Object as PropType<FormController>,
    required: true,
  },
})
const c = props.controller
const ns = useNamespace(`control-${c?.model.controlType!.toLowerCase()}`)
const slotProps: IData = { form: c }

const viewClassNames = computed(() => [ns.b()])
</script>
